<template>
    <div class="lives">
        <!-- <div class="peopleTotal">在线人数:{{peopleTotal}}</div> -->
        <video ref="videoRef" controls autoplay muted class="video"></video>
    </div>
</template>
<script setup>
import {flvUrl} from "../utlis/requests"
import { ref, onMounted, onBeforeUnmount,onUnmounted} from 'vue';
import flvjs from "flv.js";

const videoRef = ref(null);
// const peopleTotal=ref(0);   //在线人数
// let ws=null;
// let reconnectTimeout = null; // 重连超时控制

// 建立 WebSocket 连接
// const connectWebSocket = () => {
//     ws = new WebSocket("ws://192.168.10.222:9111/api/websocket?type=viewer"); // 替换为实际的 WebSocket 服务 URL
//     ws.onopen = () => {
//         console.log("WebSocket 连接已建立");
//         clearTimeout(reconnectTimeout)
//     };
//     ws.onmessage = (event) => {
//       //console.log('eee',JSON.parse(event.data))
//       if(event.data!='Connected'){
//         let datas=JSON.parse(event.data)
//         //console.log('datas',datas)
//         if(datas.type=='onlinePeopleNumber'){
//           peopleTotal.value=datas.content;
//         }
//       }
//     };
//     ws.onerror = (error) => {
//         console.error("WebSocket 发生错误", error);
//     };

//     ws.onclose = (event) => {
//        console.log("WebSocket 连接已关闭", event.code);
//       handleReconnect(); // WebSocket 连接关闭时尝试重连
//     };
// };

// 处理 WebSocket 连接断开后的重连
// const handleReconnect = () => {
//     // 如果已经在重连，避免重复重连
//     if (reconnectTimeout) {
//       return;
//     }
//     reconnectTimeout = setTimeout(() => {
//     connectWebSocket();
//     reconnectTimeout = null; // 重连后清除重连超时
//     }, 5000); // 5 秒后重连
// };

onMounted(()=>{
    //connectWebSocket(); // 组件加载时连接 WebSocket
    initFlvPlayer()
})

onBeforeUnmount(() => {
  if (videoRef.value) {
    videoRef.value.pause(); // 暂停视频流，以防内存泄漏等问题
  }
});

// onUnmounted(() => {
//   if (ws) {
//     ws.close();
//   }
// });

const initFlvPlayer=()=>{
  console.log('flvUrl',flvUrl)
  if (flvjs.isSupported()) {
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      //url: flvUrl+'/flv', // 这里填写你的 FLV 视频流 URL
      url:'http://192.168.10.222:8088/live/HIK001.live.flv',
      cors: true, // 启用CORS
      headers: {
          'Referer': flvUrl // 设置Referer头
      }
    }, {
      autoCleanupSourceBuffer: true,
      enableWorker: false, //不启用分离线程
      enableStashBuffer: false, // 启用缓冲优化
      stashInitialSize: 128, // 初始缓冲区大小（单位：KB）
      isLive: true, // 表示这是一个直播流
      lazyLoad: false,
    });
    flvPlayer.attachMediaElement(videoRef.value);
    flvPlayer.load(); // 加载视频流
    flvPlayer.play().then(() => {
        console.log('Video is playing');
    }).catch((error) => {
        console.error('Play failed:', error);
    }); // 开始播放视频流
  }else {
        console.error('FLV is not supported in this browser.');
    }
}


</script>
<style lang="less" scoped>
.lives{
  height:343px;
  width:712px;
  background: url('../components/img/center-container.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
  position: relative;
  transform: matrix(1, 0, 0, 1, 1, 0);
  transition-duration: 0ms;
  .video{
      width: 100%;
      height: 100%;
      padding: 1%;
      border-radius: 2%;
      object-fit: fill;
  }
  .peopleTotal{
    position: absolute;
    right:15px;
    top:10px;
    z-index: 99;
    color: rgb(116, 183, 255);
  }
}

</style>